iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0
Modern Web

Daily UI : 開發者版系列 第 9

Vuetify:Search Header

  • 分享至 

  • xImage
  •  

https://codepen.io/hereiscasio/pen/QZrBpP

Used UI Component ( #2 )

#1 Text fields #2 Tabs

UI 圖來源件

Discussion

cols='auto' 的意義代表 v-col 會設成跟其內部所囊括的元件寬度相同,而另一個 v-col 的寬度就會佔用 v-row 中的剩下的寬度( cols='undefined',這你可以不用寫 )。若欲了解程式碼中的其它屬性,請直接移除該屬性看渲染結果,這樣學最快

附註:我並沒有完美處理這個背景圖在各個斷點的情況,因為那並非本系列文關注重點

<v-row no-gutters justify='center'>
    <v-col cols='undefined'>  
        <v-text-field
            class="mx-3 black--text" solo
            :label="TEXT_PLACEHOLDER" :hint="TEXT_HINT" persistent-hint
        ></v-text-field>           
    </v-col>
    <v-col cols='auto'>
        <v-btn 
            v-text='"Search"'
            large class="mt-0 mx-0" color="primary" height='48'>
        </v-btn>
    </v-col>               
</v-row>

上一篇
Vuetify:Time is money
下一篇
Vuetify:Account Settings
系列文
Daily UI : 開發者版30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言